<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for=" (p, index) in products" :key="index">
                <p>产品名称:{{p.name}}</p>
                <p>发布时间:{{p.date}}</p>
                <!-- <p>产品名称:{{p.name}}</p> -->
                <!-- <p>产品名称:{{p.name}}</p> -->
                <p>发布时间:{{ p.date | formatDate('yyyy-MM-dd hh:mm:ss') }}</p>
                <p>发布时间:{{ p.date | formatDate('yyyy-M-dd hh:mm:ss') }}</p>
                <p>发布时间:{{ p.date | formatDate('yy-MM-dd') }}</p>
                <p>发布时间:{{ p.date | formatDate('hh:mm:ss') }}</p>
            </li>
        </ul>
    </div>
    <div id="root">
        <!-- 局部过滤器 只能被用于指定的容器中 -->
        <p>{{day | formatDate("yyyy-MM-dd") }}</p>
    </div>

</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            products:[
                {name:"产品1",date:new Date("2018-12-20 13:35:42")},
                {name:"产品2",date:new Date("2018-3-13 8:35:42")},
                {name:"产品3",date:new Date("2019-4-20 15:35:42")},
                {name:"产品4",date:new Date("2019-10-20 20:35:42")}
            ]
        },
        computed: {
            
        },
        filters:{
            firstFilter:function(target,arg1,arg2,arg3,arg4){
                console.log(target,arg1,arg2,arg3,arg4);
                return "过滤器firstFilters"
            },
            // 过滤方法都是以工具形式出现
            formatDate(target, str){
                if(!(target instanceof Date)) {
                    console.log("formatDate是对事件对象进行格式化的方法");
                    return target;
                }
                // console.log(str); // yyyy-MM-dd hh:mm:ss
                let y = target.getFullYear()+"";
                // console.log(y);
                let o = {
                    "(M+)":target.getMonth() + 1 + "",
                    "(d+)":target.getDate() + "",
                    "(h+)":target.getHours() + "",
                    "(m+)":target.getMinutes() + "",
                    "(s+)":target.getSeconds() + ""
                }
                if(new RegExp("(y+)").test(str)){
                    str = str.replace( /y+/, y.substr(y.length - RegExp.$1.length, y.length));
                }
                for(const key in o) {
                    let reg = new RegExp(key);
                    if(reg.test(str)) {
                        let rep = "";
                        if(RegExp.$1.length == 1){
                            rep = o[key];
                        }else{
                            rep = ("0" + o[key]).substr(-2,2);
                            // console.log(rep);
                        }
                        str = str.replace(reg, rep);
                    }
                }
                return str;
            }
        }
    })
    // new Vue({
    //     el: "#root",
    //     data: {
    //         day: new Date()
    //     }
    // })
</script>
</html>